<template>
    <div class="kline">
        <div class="original">
            <!-- k线周期切换 -->
            <!-- <div class="select-kline-time-box">
                <div class="show-time-list">
                    <div class="show-time-item" v-for="item in show_time" :key="item.id" :style="`background-color: ${ item.value == select_time ? 'var(--active-light-color)' : '#fff' }; color: ${ item.value == select_time ? 'var(--active-color)' : 'var(--text-color)' }`" @click.stop="clickChangeTime(item.value)">{{ item.shortName }}</div>
                </div>
                <div class="select-more-time-box" @click="show_more_time = true">
                    <div class="select-more-time" :style="`background-color: ${ select_time == select_more_time.value ? 'var(--active-light-color)' : '#fff' }; color: ${ select_time == select_more_time.value ? 'var(--active-color)' : 'var(--text-color)' }`">{{ select_more_time.shortName }}</div>
                    <div class="select-more-time-list" v-show="show_more_time">
                        <div class="select-more-time-item" v-for="item in select_time_list" :key="item.id" :style="`background-color: ${ item.value == select_time ? 'var(--active-more-light-color)' : '#fff' }; color: ${ item.value == select_time ? 'var(--active-color)' : 'var(--text-color)' }`" @click.stop="clickMoreTimeToChange(item)">{{ item.shortName }}</div>
                    </div>
                </div>
            </div> -->
            <!-- k线图 -->
            <div id="kchart"></div>
            <!-- k线周期切换 -->
            <div class="select-kline-time-box">
                <div class="show-time-list">
                    <div class="show-time-item" v-for="item in select_time_list" :key="item.id" :style="`background-color: ${ item.value == select_time ? 'var(--active-light-color)' : '#fff' }; color: ${ item.value == select_time ? 'var(--active-color)' : 'var(--text-color)' }`" @click.stop="clickChangeTime(item.value)">{{ item.shortName }}</div>
                </div>
            </div>
            <!-- 开关高低 -->
            <div class="open-close-high-low">
                <div class="item">
                    <div class="k">Open</div>
                    <div class="v">{{ stock_detail_data.more[1].v }}</div>
                    <!-- <div class="v">$0.00</div> -->
                </div>
                <div class="item">
                    <div class="k">Close</div>
                    <div class="v">{{ stock_detail_data.more[0].v }}</div>
                    <!-- <div class="v">$0.00</div> -->
                </div>
                <div class="item">
                    <div class="k">High</div>
                    <div class="v">${{ stock_detail_data.more[2].v.split(' - ')[1] || '0.00' }}</div>
                    <!-- <div class="v">$0.00</div> -->
                </div>
                <div class="item">
                    <div class="k">Low</div>
                    <div class="v">${{ stock_detail_data.more[2].v.split(' - ')[0] || '0.00' }}</div>
                    <!-- <div class="v">$0.00</div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
import { init, dispose } from 'klinecharts';
import { stock_list, kline_data, chartDOM, changeStock, stock_detail_data, klinechart_reset, select_time, changeTime } from '@/service/market.js';
import { debounce } from '@/utils/debounce.js';

// const show_time = [
//     { id: 1, name: '1Mins', shortName: '1M', value: 60 * 1000 },
//     { id: 2, name: '5Mins', shortName: '5M', value: 5 * 60 * 1000 },
//     { id: 3, name: '15Mins', shortName: '15M', value: 15 * 60 * 1000 },
//     { id: 4, name: '30Mins', shortName: '30M', value: 30 * 60 * 1000 },
// ];

// const select_time_list = [
//     { id: 5, name: '1Hour', shortName: '1H', value: 60 * 60 * 1000 },
//     { id: 6, name: '1Day', shortName: '1D', value: 24 * 60 * 60 * 1000 },
//     { id: 7, name: '1Week', shortName: '1W', value: 7 * 24 * 60 * 60 * 1000 },
//     { id: 8, name: '1Month', shortName: '1Mon', value: 30 * 24 * 60 * 60 * 1000 },
// ];

// const select_more_time = ref(select_time_list[0]);

// const show_more_time = ref(false);

const select_time_list = [
    { id: 1, name: '1Mins', shortName: '1M', value: 60 * 1000 },
    { id: 2, name: '5Mins', shortName: '5M', value: 5 * 60 * 1000 },
    { id: 3, name: '15Mins', shortName: '15M', value: 15 * 60 * 1000 },
    { id: 4, name: '30Mins', shortName: '30M', value: 30 * 60 * 1000 },
    { id: 5, name: '1Hour', shortName: '1H', value: 60 * 60 * 1000 },
    { id: 6, name: '1Day', shortName: '1D', value: 24 * 60 * 60 * 1000 },
    { id: 7, name: '1Week', shortName: '1W', value: 7 * 24 * 60 * 60 * 1000 },
    { id: 8, name: '1Month', shortName: '1Mon', value: 30 * 24 * 60 * 60 * 1000 },
];

function clickChangeTime(time) {
    changeTime(time);
    show_more_time.value = false;
    select_more_time.value = select_time_list[0];
}

// function clickMoreTimeToChange(item) {
//     changeTime(item.value);
//     show_more_time.value = false;
//     select_more_time.value = item;
// }

const klineStype = {
    candle: {
        tooltip: {
            // showRule: 'none',
            showRule: 'follow_cross',
            showType: 'rect',
            labels: ['time', 'open', 'close', 'high', 'low', 'volume'],
        }
    },
};

function initKLintChart() {
    // 初始化一个 k线图
    chartDOM.dom = init('kchart', klineStype);
    chartDOM.is_created = true;
    chartDOM.dom.setStyles(klineStype);
    chartDOM.dom.setBarSpace(5);
    chartDOM.dom.setOffsetRightDistance(40);
    chartDOM.dom.setTimezone('America/New_York');
    chartDOM.dom.createIndicator(
        {
            name: 'MA',
            shortName: 'MA',
            calcParams: [10, 20, 30],
            dragEnabled: true,
            plots: [
                { key: 'ma1', title: 'MA10: ', type: 'line' },
                { key: 'ma2', title: 'MA20: ', type: 'line' },
                { key: 'ma3', title: 'MA30: ', type: 'line' }
            ],
            regeneratePlots: (params) => {
                return params.map((p, i) => {
                    return { key: `ma${i + 1}`, title: `MA${p}: `, type: 'line' }
                })
            },
        },
        false,
        { id: "candle_pane", dragEnabled: true, height: 50 }
    );
    chartDOM.dom.applyNewData(kline_data.value, true);
}

watch(klinechart_reset, () => {
    // 解除监听器
    window.removeEventListener('resize', resize_kline);
    // 销毁 k线图
    dispose('kchart');
    chartDOM.is_created = false;
    // 初始化 k线图
    initKLintChart();
    // 重新绑定窗口大小监听器
    window.addEventListener('resize', resize_kline);
});

// 定义重绘函数
const resize_kline = debounce(() => {
    chartDOM.dom.resize();
}, 150);

onMounted(async () => {
    // 等待 DOM 渲染完成
    await nextTick();
    // 初始化一个 k线图
    initKLintChart();
    // 在窗口尺寸改变时重绘 k线图
    window.addEventListener('resize', resize_kline);
});

onUnmounted(() => {
    // 解除监听器
    window.removeEventListener('resize', resize_kline);
    // 销毁 k线图
    dispose('kchart');
    // 销毁 k线图 DOM
    chartDOM.dom = null;
    chartDOM.is_created = false;
});
</script>

<style scoped lang="less">
.kline .original {
    box-sizing: border-box;
    width: 100%;
    padding: 5vw 0;

    .select-kline-time-box {
        display: flex;
        gap: 3vw;
        margin: 4vw 0;
        justify-content: center;

        .show-time-list {
            display: flex;
            gap: 3vw;
            
            .show-time-item {
                font-size: 3vw;
                padding: 0.5vw 1vw;
                border-radius: 2vw;
            }
        }

        .select-more-time-box {
            position: relative;

            &::after {
                content: '';
                display: block;
                width: 0;
                height: 0;
                border-top: 1vw solid var(--text-color);
                border-left: 1vw solid #00000000;
                border-right: 1vw solid #00000000;
                border-bottom: 1vw solid #00000000;
                position: absolute;
                top: 60%;
                right: 1vw;
                transform: translateY(-50%);
            }

            .select-more-time {
                font-size: 3vw;
                color: var(--text-color);
                padding: 0.5vw 1vw;
                padding-right: 3vw;
                border-radius: 2vw;
            }

            .select-more-time-list {
                position: absolute;
                top: 101%;
                left: 0;
                z-index: 100;
                box-shadow: 0 0 10vw rgba(0, 0, 0, 0.1);

                .select-more-time-item {
                    font-size: 3vw;
                    padding: 2vw;
                    background-color: #fff;
                }
            }
        }
    }

    #kchart {
        width: 100%;
        height: 90vw;
    }

    .open-close-high-low {
        box-sizing: border-box;
        width: 90%;
        margin: 0 auto;
        padding: 3vw;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background-color: var(--bg-strong-color);
        border-radius: 2vw;
        
        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1vw;

            .k {
                font-size: 3vw;
                color: var(--text-light-color);
            }

            .v {
                font-size: 3.5vw;
            }
        }
    }
}
</style>